<template>
    <div>
        <el-col :span="24" class="action-bar">
            <el-button type="primary" size="medium" @click="reBack">返回</el-button>
        </el-col>
        
        <div class="form-wrapper">
           <div class="form-table">
                <h1>商品信息详情</h1>
         <el-form :label-position="'left'" label-width="120px" >
            <el-form-item label="封面图片">
                    <img :src="photoImg" alt="" style="width:400px;height:300px;object-fit:contain">
                </el-form-item>
                <el-form-item label="商品名称">
                    <div>{{member.name}}</div>
                </el-form-item>
                <el-form-item label="商品排序">
                    <div>{{member.sorNum}}</div>
                </el-form-item>
                <el-form-item label="描述">
                    <div>{{member.desc}}</div>
                </el-form-item>
                <el-form-item label="库存">
                    <div>{{member.storage}}</div>
                </el-form-item>
                <el-form-item label="所需积分">
                    <div>{{member.intergal}}</div>
                </el-form-item>
                <el-form-item label="是否上架">
                    <div>{{member.isSell?'是':'否'}}</div>
                </el-form-item>
                <el-form-item label="正文详情">
                    <div v-html="member.content" class="richContent"></div>
                </el-form-item>
        </el-form>
           </div>

        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            photoImg:'',
            member:{
                name:'',
                sortNum:'',//商品编号
                intergal:'',
                storage:0,//库存
                isSell:true,//上下架
                desc:'',
                content:'',
            },
            id:'',
        }
    },
    methods:{
        reBack(){
            this.$router.replace('ExchangeList')
        },
        async getGoodsDetail(){
            //获取详情
            let params={id:this.id}
          let res=await  this.$api.getGoodsDetail(params) 
          if(res.data.level=='success' &&res.data.data){
              let data=res.data.data
              this.member.name=data.name;
              this.member.desc=data.info;
              this.member.sortNum=data.sort;
              this.member.intergal=data.exchange_integral;
              this.member.content=data.detail||'';
              this.photoImg=data.thumb_url;
          }
        },
    },
    mounted() {
        this.id=this.$route.query.id;
	  this.getGoodsDetail()
    },
}
</script>
<style lang="scss" scoped>
    .form-wrapper{
       display: flex;
       justify-content: center;
       width:100%;
       flex-wrap: wrap;
       .form-table{
           margin:20px;
           display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 80%;
            border: 1px solid #eee;
            box-shadow: #eee 5px 5px 20px;
            padding:20px;
            h1{
                width: 100%;
                font-size: 24px;
                color:red;
            }
       }
    }
    .richContent{
        img{
            max-width: 60%;

        }
    }
</style>